import { Spin, TabPane, Tabs } from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import { reportApi } from '@/apis'

export default defineComponent({
  name: 'DashboardIndex',
  setup() {
    const loading = ref(false)
    const reportYinXiaoUrl = ref({} as string)
    const reportJinDouUrl = ref({} as string)
    const yinxiaoPageId = '0619bcce-3f9f-4f95-bb69-3e600e449066'
    const jindouPageId = '2cac375b-19be-44b6-a82a-82902338c269'
    const loadSuccess = ref(false)
    onMounted(() => {
      getXyReportUrl()
    })

    async function getXyReportUrl() {
      loading.value = true
      try {
        const accessTicketYx = await reportApi.getAccessTicket(yinxiaoPageId)
        reportYinXiaoUrl.value = `https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=${yinxiaoPageId}&accessTicket=${accessTicketYx}`
        loadSuccess.value = true
      } finally {
        loading.value = false
      }
    }

    async function getJdReportUrl() {
      loading.value = true
      try {
        const accessTicketJd = await reportApi.getAccessTicket(jindouPageId)
        reportJinDouUrl.value = `https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=${jindouPageId}&accessTicket=${accessTicketJd}`
      } finally {
        loading.value = false
      }
    }

    function onChange(index) {
      if (index == 1) {
        getXyReportUrl()
      } else {
        getJdReportUrl()
      }
    }

    return {
      loading,
      reportYinXiaoUrl,
      reportJinDouUrl,
      loadSuccess,
      onChange
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        {this.loadSuccess ? (
          <Tabs onChange={this.onChange}>
            <TabPane key={1} tab="营销数据">
              <div style={{ width: '100%', height: 'calc(100vh - 170px)' }}>
                <iframe
                  style={{ width: '100%', height: '100%' }}
                  src={this.reportYinXiaoUrl}
                  frameborder="0"
                />
              </div>
            </TabPane>
            <TabPane key={2} tab="金豆数据">
              <div style={{ width: '100%', height: 'calc(100vh - 170px)' }}>
                <iframe
                  style={{ width: '100%', height: '100%' }}
                  src={this.reportJinDouUrl}
                  frameborder="0"
                />
              </div>
            </TabPane>
          </Tabs>
        ) : (
          <h2>自研管理后台</h2>
        )}
      </Spin>
    )
  }
})
